<template>
  <NModal
    v-model:show="modalVisible"
    preset="dialog"
    :title="editData ? '编辑品牌' : '添加品牌'"
    :closable="false"
    style="width: 500px"
  >
    <NForm
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-placement="left"
      label-width="80px"
    >
      <NFormItem label="品牌名称" path="name">
        <NInput
          v-model:value="formData.name"
          placeholder="请填写品牌名称"
          clearable
        />
      </NFormItem>
      <NFormItem label="备注" path="beizhu">
        <NInput
          v-model:value="formData.beizhu"
          placeholder="请填写备注"
          clearable
        />
      </NFormItem>
    </NForm>
    <template #action>
      <div class="flex justify-end space-x-2">
        <NButton @click="handleCancel">取 消</NButton>
        <NButton
          type="primary"
          :loading="submitLoading"
          @click="handleConfirm"
        >
          确 定
        </NButton>
      </div>
    </template>
  </NModal>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import { InventoryGoods } from '@/service/api/inventory';
import type { BrandFormProps, BrandFormEmits, BrandFormData, GoodsBrand } from './types';

// 组件属性和事件
defineOptions({ name: 'BrandForm' });
const props = withDefaults(defineProps<BrandFormProps>(), {
  editData: null
});
const emit = defineEmits<BrandFormEmits>();

// 表单引用和状态
const formRef = ref<FormInst>();
const submitLoading = ref(false);

// 表单数据
const formData = reactive<BrandFormData>({
  name: '',
  beizhu: ''
});

// 表单验证规则
const rules: FormRules = {
  name: [
    {
      required: true,
      message: '请填写品牌名称',
      trigger: 'blur'
    }
  ]
};

// 模态框显示状态
const modalVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

// 监听编辑数据变化
watch(
  () => props.editData,
  (data: GoodsBrand | null) => {
    if (data) {
      formData.objectId = data.objectId;
      formData.name = data.name;
      formData.beizhu = data.beizhu;
    } else {
      // 重置表单
      formData.objectId = undefined;
      formData.name = '';
      formData.beizhu = '';
    }
  },
  { immediate: true }
);

// 监听显示状态
watch(
  () => props.visible,
  (visible) => {
    if (!visible) {
      // 重置表单
      formData.objectId = undefined;
      formData.name = '';
      formData.beizhu = '';
      // 清除验证状态
      formRef.value?.restoreValidation();
    }
  }
);

// 取消操作
function handleCancel() {
  modalVisible.value = false;
}

// 确认提交
async function handleConfirm() {
  const valid = await formRef.value?.validate();
  if (!valid) return;

  submitLoading.value = true;
  
  const response = await InventoryGoods.saveBrand(formData);
  
  if (response && !response.error && response.data) {
    window.$message?.success('保存成功');
    modalVisible.value = false;
    emit('success');
  }
  
  submitLoading.value = false;
}
</script>

<style scoped>
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 8px;
}
</style>